import { reactive } from "vue";

interface DefaultPaginationData {
  total: number;
  currentPage: number;
  pageSizes: number[];
  pageSize: number;
  layout: string;
}

interface PaginationData {
  total?: number;
  currentPage?: number;
  pageSizes?: number[];
  pageSize?: number;
  layout?: string;
}

/** 默认的分页参数 */
const defaultPaginationData: DefaultPaginationData = {
  total: 0,
  currentPage: 1,
  pageSizes: [10, 20, 50],
  pageSize: 10,
  layout: "total, sizes, prev, pager, next, jumper"
};

export function usePagination(initialPaginationData: PaginationData = {}) {
  /** 合并分页参数 */
  const paginationData = reactive({
    ...defaultPaginationData,
    ...initialPaginationData
  });
  /** 改变当前页码 */
  const handleCurrentChange = (value: number) => {
    paginationData.currentPage = value;
  };
  /** 改变页面大小 */
  const handleSizeChange = (value: number) => {
    paginationData.pageSize = value;
  };

  return { paginationData, handleCurrentChange, handleSizeChange };
}
